<template>
    <div class="person">
        <h4>姓名：{{ name }}</h4>
        <h4>年龄：{{ age }}</h4>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showtel">查看联系方式</button>
    </div>
</template>

<script>
    export default {
        name: 'Person',
        setup(){
            //数据
            let name = '真米酒';
            let age = 19;
            let tel = '1234567890';
            //方法
            //名字和年龄都修改成功，但是页面不会修改呈现，因为没有做到动态相应
            function changeName(){
                name = '小羊肖恩';  
                console.log(name);
            }
            function changeAge(){
                age += 1;
                console.log(age);
            }
            function showtel(){
                alert('电话：'+ tel)
            }
            //要想数据，方法能被使用，都需return 出去
            return {name,age,changeName,changeAge,showtel}
        }
    }
   
</script>

<style>
    .person{
        background-color: rgb(251, 95, 121);
        border-radius: 10px;
        height: 150px;
        width: 300px;
        box-shadow: 0 0 10px;
    }
</style>